<template>
	<div class="app-container">
		<div class="bgWhite radius8 p20 ">
			<div class="flex col-center row-between mb20">
				<span class="fb fs16">物流公司</span>
				<div>
					<el-button type="defaultBtn" icon="plus" @click="handleAdd"
					v-hasPermi="['logistics_rules:add']"
					>新增</el-button>
					<el-button type="info" icon="refresh" @click="getList">刷新</el-button>
				</div>
			</div>
			<el-table v-loading="loading" :data="rulesList"
				:header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}" :cell-style="{height:'54px'}">
				<el-table-column label="主键" align="center" prop="id" v-if="false" />

				<el-table-column label="物流公司" align="center" prop="logisticsCompany" />
				<el-table-column label="物流方式" align="center" prop="logisticsMethod">
					<template v-slot="scope">
						<dict-tag :options="bus_logistics_type" :value="scope.row.logisticsMethod" />
					</template>
				</el-table-column>
				<el-table-column label="启用" align="center" prop="status">
					<template v-slot="scope">
						<el-switch v-model="scope.row.status" class="ml-2" inline-prompt active-text="启用"
							inactive-text="禁用" @click="updateEnabled(scope.row)" :loading="loading" />
					</template>
				</el-table-column>

				<el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
					<template v-slot="scope">
						<el-button size="mini" type="text" @click="handleRemove(scope.row)"
						v-hasPermi="['logistics_rules:remove']"
						>删除</el-button>
						<el-button link class="linkBtnColor" type="primary" @click="handleUpdate(scope.row)"
						v-hasPermi="['logistics_rules:change']"
						>编辑
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
				v-model:limit="queryParams.pageSize" @pagination="getList" />
		</div>

		<!-- 添加或修改对话框 -->
		<el-dialog :title="title" center v-model="open" width="800px" append-to-body>
			<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">

				<el-row>
					<el-col :span="12">
						<el-form-item label="物流公司" >
							<el-input type="text" v-model="form.logisticsCompany" size="large" />
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="联系人" prop="contactPerson">
							<el-input type="text" v-model="form.contactPerson" size="large" />
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="12">
						<el-form-item label="物流方式" prop="logisticsMethod">
							<el-radio-group v-model="form.logisticsMethod">
								<el-radio class="bus-radio-button-selected-bg-color " v-for="item in bus_logistics_type"
									:label="item.value" :value="item.value">{{ item.label }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>

					<el-col :span="12">
						<el-form-item label="手机号" prop="phoneNumber">
							<el-input type="text" v-model="form.phoneNumber" size="large"/>
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item label="费用计算方式" prop="billingMethod">
					<el-radio-group v-model="form.billingMethod">
						<el-radio class="bus-radio-button-selected-bg-color " v-for="item in bus_charge_mode"
							:label="item.value" :value="item.value">{{ item.label }}
						</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="" prop="billingRule" label-width="0px">
					<el-table :data="form.billingRule" style="width: 100%" :header-row-style="{
						background: '#FAFAFA',
						color: '#0C1019',
						height: '54px',
					  }" :cell-style="{ height: '54px' }">
			
						<el-table-column label="首重（kg）" align="center">
							<template v-slot="scope">
								<el-input type="text" v-model="scope.row.firstCharge" />
							</template>
						</el-table-column>

						<el-table-column label="首费（元）" align="center">
							<template v-slot="scope">
								<el-input type="text" v-model="scope.row.firstWeight" />
							</template>
						</el-table-column>

						<el-table-column label="续重（kg）" align="center">
							<template v-slot="scope">
								<el-input type="text" v-model="scope.row.exceedCharge" />
							</template>
						</el-table-column>

						<el-table-column label="续费（元）" align="center">
							<template v-slot="scope">
								<el-input type="text" v-model="scope.row.exceedWeight" />
							</template>
						</el-table-column>

						<el-table-column label="此规则针对：省份" align="center" width="250">
							<template v-slot="scope">
								<el-select v-model="scope.row.areaCode" placeholder="请选择" clearable multiple>
									<template #label="{ label, value }">
										<span>{{ label }}: </span>
										<span style="font-weight: bold">{{ value }}</span>
									</template>
									<el-option v-for="item in divisionsDict" :key="item.value" :label="item.label"
										:value="item.value" />
								</el-select>
								<span class="color-red">
									{{ scope.row.areaCode.length > 0 ? "" : "所有省份（特殊省份除外）" }}
								</span>
							</template>
						</el-table-column>

						<el-table-column label="操作" align="center" width="100">
							<template v-slot="scope">
								<el-button size="mini" type="text" @click="removeRow(scope.$index)"
									>删除</el-button>
								<el-button v-if="scope.$index === form.billingRule.length - 1" size="mini" type="text"
									@click="addRow()">新增</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer text-right mt30">
				<el-button class="cancelSubBtn" @click="cancel">取 消</el-button>
				<el-button type="primary" @click="submitForm" class="mainSubBtn">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script name="RulesLogisticsSetup">
	import {
		list,
		update,
		add,
		putStatus,
		logistStatus,//启用禁用
		del,//删除物流公司
	} from "@/api/business/rules_logistics";
	import {
		list as divisionsList
	} from "@/api/tool/divisions";
	export default {
		data() {
			return {
				bus_logistics_type: this.useDict('bus_logistics_type').bus_logistics_type,
				bus_charge_mode: this.useDict('bus_charge_mode').bus_charge_mode,
				loading: false,
				ids: [],
				total: 0,
				rulesList: [],
				divisionsDict: [], //地市编码数据
				title: '', //弹出层标题
				open: false, //是否显示弹出层
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					level: 2,
					channel: "1001",
					type: "provinces"
				},
				form: {
					logisticsCompany: '',
					logisticsMethod: '',
					contactPerson: '',
					phoneNumber: '',
					billingMethod: '',
					billingRule: [],
					status: 0,
				},
				rules: {
					ids: [{
						required: true,
						message: "选择部门不能为空",
						trigger: "blur"
					}],
					executionType: [{
						required: true,
						message: "分配规则不能为空",
						trigger: "blur"
					}, ],
				}
			}
		},
		created() {
			this.getList()
			this.getDivisionsList()
		},
		methods: {
			getList() {
				this.loading = true;
				list(this.queryParams).then((response) => {
					this.rulesList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			getDivisionsList() {
				divisionsList(this.queryParams).then((response) => {
					let list = response.rows;
					this.divisionsDict = list.map((item) => ({
						label: item.name,
						value: item.code
					}));
				});
			},
			cancel() {
				this.open = false;
				this.reset();
			},
			reset() {
				this.resetForm("formRef");
				this.form = {
					logisticsCompany: '',
					logisticsMethod: '',
					contactPerson: '',
					phoneNumber: '',
					billingMethod: '',
					billingRule: [{
						firstCharge: '',
						firstWeight: '',
						exceedCharge: '',
						exceedWeight: '',
						areaCode: [],
					}, ],
					status: 0,
				};
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.getList();
			},
			// 删除
			handleRemove(row){
				const ids = row.id
				let that = this
				this.$modal
				  .confirm('是否确认删除物流公司"' + row.logisticsCompany + '"吗？')
				  .then(function () {
				    del(ids).then(res=>{
						  that.getList()
						  that.$modal.msgSuccess("删除成功");
					  })
				  })
				  .catch(() => { });
			},
			// 打开更新面板
			handleUpdate(row) {
				// this.reset();
				this.open = true;
				this.title = "编辑物流规则";
				setTimeout(()=>{
					this.form = row
					this.$forceUpdate()
				},200)
				console.log(row,'row===')
			},
			handleAdd() {
				this.reset();
				this.open = true;
				this.title = "新增物流规则";
				if (!this.form.id) {
					this.form.logisticsMethod = this.bus_logistics_type[0].value;
					this.form.billingMethod = this.bus_charge_mode[0].value;
				}
			},
			// 增加 内联表行
			addRow() {
				this.form.billingRule.push({
					firstCharge: null,
					firstWeight: null,
					exceedCharge: null,
					exceedWeight: null,
					areaCode: [],
				});
			},
			// 删除 内联表行
			removeRow(rowIndex) {
				this.form.billingRule.splice(rowIndex, 1);
				var l = this.form.billingRule.length;
				if (l < 1) {
					this.addRow()
				}
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryRef");
				this.handleQuery();
			},
			updateEnabled(row) {
				this.loading = true;
				let item = {
					id: row.id,
					status: row.status,
				}
				logistStatus(item).then((response) => {
					this.$modal.msgSuccess("状态更新成功");
					this.loading = false;
					this.getList();
				});
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["formRef"].validate((valid) => {
					if (valid) {
						if (this.form.id != null) {
							update(this.form).then((response) => {
								this.$modal.msgSuccess("更新成功");
								this.open = false;
								this.getList();
							});
						} else {
							add(this.form).then((response) => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.getList();
							});
						}
					}
				});
			}
		}
	}
</script>